<template>
    <div class="lwy-deposit">
        <div class="lwy-back">
            <router-link to="/happyhome/live/account"><i class="el-icon-arrow-left"></i>返回</router-link>
        </div>
        <div class="year-momth">
            <div class="container">
                <el-date-picker v-model="value" type="year" placeholder="选择年" value-format=yyyy>
                </el-date-picker>
                <el-date-picker v-model="value2" type="month" placeholder="选择月" value-format=yyyy-MM>
                </el-date-picker>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="text" @click="adddeposit = true">添加</el-button>
            </div>
        </div>
        <div class="table">
            <el-table :data="depositData" border style="width: 100%">
                <el-table-column prop="time" label="日期">
                </el-table-column>
                <el-table-column prop="name" label="添加人">
                </el-table-column>
                <el-table-column prop="deposit" label="存款金额">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="button-edit"
                            @click="editDeposit(scope.row)">修改</el-button>
                        <el-popconfirm title="确定删除该条账单吗？" @confirm="delDeposit(scope.row)">
                            <el-button type="text" size="small" slot="reference" class="button-del">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
            :page-sizes="[6, 18, 24]" layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
        </el-pagination>
        <!-- 添加 -->
        <el-dialog title="添加" :visible.sync="adddeposit">
            <el-form :model="addinformation">
                <el-form-item label="时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="addinformation.time" type="month" placeholder="请选择时间" value-format=yyyy-MM>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="添加人" :label-width="formLabelWidth">
                    <el-input v-model="addinformation.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="存款金额" :label-width="formLabelWidth">
                    <el-input v-model="addinformation.deposit" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="adddeposit = false">取 消</el-button>
                <el-button type="primary" @click="addconfirm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="editdeposit">
            <el-form :model="editinformation">
                <el-form-item label="时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="editinformation.time" type="month" placeholder="请选择时间" value-format=yyyy-MM>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="添加人" :label-width="formLabelWidth">
                    <el-input v-model="editinformation.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="存款金额" :label-width="formLabelWidth">
                    <el-input v-model="editinformation.deposit" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editdeposit = false">取 消</el-button>
                <el-button type="primary" @click="editconfirm(editinformation)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            value: '',
            value2: '',
            limit: 6,
            currentPage4: 1,
            totalPage:10,
            adddeposit: false,
            editdeposit: false,
            formLabelWidth: '100px',
            depositData: [],
            depositData1: [],
            addinformation: {
                time: '',
                name: '',
                deposit: ''
            },
            editinformation: {
                id: '',
                time: '',
                name: '',
                deposit: ''
            }
        };
    },
    methods: {
        // 数据渲染
        render() {
            axios({
                url: '/dbdata/deposit'
            }).then(({ data }) => {
                for (let i = 0; i < data.length; i++) {
                    let arrTime = data[i].time.split("T");
                    if (arrTime.length >= 2) {
                        data[i].time = arrTime[1].split(".");
                        data[i].time = arrTime[0].slice(0, 7)
                    }
                }
                this.depositData1 = data
                this.totalPage=this.depositData1.length
                this.depositData1.sort((a, b) =>
                new Date(b.time).getTime() - new Date(a.time).getTime()
                )
                this.depositData = this.depositData1.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit)
            })
        },
        // 查询
        onSubmit() {
            axios.get('/dbdata/deposit', {
                params: { q: encodeURIComponent(this.value || this.value2) }
            }).then(({ data }) => {
                this.depositData1 = data
                this.depositData = this.depositData1.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit)
                this.value = ''
                this.value2 = ''
            })
        },
        // 添加
        addconfirm() {
            axios({
                url: '/dbdata/deposit',
                method: 'post',
                data: this.addinformation
            }).then(() => {
                this.render()
                this.adddeposit = false
                this.$message.success('添加成功')
                this.addinformation = {
                    time: '',
                    name: '',
                    deposit: ''
                }
            })
        },
        // 修改
        editDeposit(row) {
            this.editinformation = {
                id: row.id,
                time: row.time,
                name: row.name,
                deposit: row.deposit
            }
            this.editdeposit = true
        },
        editconfirm(v) {
            axios({
                url: '/dbdata/deposit/' + v.id,
                method: 'patch',
                data: this.editinformation
            }).then(() => {
                this.editdeposit = false
                this.$message.success('修改成功')
                this.render()
            })
        },
        // 删除
        delDeposit(row) {
            axios({
                url: '/dbdata/deposit/' + row.id,
                method: 'delete'
            }).then(({ data }) => {
                this.depositData1 = data
                this.$message.success('删除成功')
                if (Math.ceil((this.depositData1.length - 1) / this.limit) < this.currentPage4) {
                    this.currentPage4--
                }
                this.currentPage4=1
                this.render()
            })
        },
        // 分页
        handleSizeChange(val) {
            this.limit = val;
            this.depositData = this.depositData1.slice(0, this.limit)
        },
        handleCurrentChange(val) {
            this.currentPage4=val
            this.depositData = this.depositData1.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit);
        },
    },
    mounted() {
        this.render()
    }
}
</script>
<style lang="less">
.lwy-deposit {
    .lwy-back {
        text-align: left;
        margin-left: 5px;
        margin-top: 20px;

        a:-webkit-any-link {
            color: rgba(00, 00, 00, 0.67);
            text-decoration: none;

            .el-icon-arrow-left {
                margin-right: 5px;
                margin-left: 20px;
            }

        }
    }

    .year-momth {
        .container {
            text-align: left;
            margin-left: 40px;
            margin-top: 20px;
        }

        .el-date-editor {
            width: 150px;
            margin-right: 20px;
        }

        .el-button {
            width: 100px;
            background-color: rgb(255, 233, 192);
            color: rgba(00, 00, 00, 0.8);
            border-color: rgb(255, 233, 192);

            &:hover {
                background-color: rgba(255, 233, 192, 0.8);
                color: rgba(00, 00, 00, 0.5);
                border-color: rgba(255, 233, 192, 0.8);
            }
        }
    }

    .table {
        .el-table {
            width: 95% !important;
            margin-left: 35px;
            margin-top: 20px;
            border-radius: 0.5em;

            .el-table__cell {
                text-align: center;
            }

            .button-edit {
                background-color: rgba(255, 255, 255, 0.0) !important;
                width: 50px !important;

            }

            .button-del {
                background-color: rgba(255, 255, 255, 0.0) !important;
                width: 50px !important;
            }
        }

    }

    .el-pagination {
        margin-top: 20px;
        text-align: right;
        margin-right: 50px;
    }

    .el-dialog {
        width: 36%;

        .el-form {
            margin-left: 0;

            .el-form-item {
                width: 450px;

                .el-date-editor {
                    margin-left: -127px;
                }
            }
        }

    }
}
</style>